<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main style="background: #f2f2f2;">
      <el-main class="main">
        <!-- 查詢 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.user"
              placeholder="用户名/姓名"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.region" placeholder="选择所属部门">
              <el-option
                v-for="item in state1.department"
                :value="item.id"
                :key="item.id"
                :label="item.departmentName"
              ></el-option>
              <!-- <el-option label='sss' value="1" />
              <el-option label="保洁部" value="3" />
              <el-option label="教学部" value="4" /> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search()">
              查询
            </el-button>
            <el-button type="primary" @click="empty">
              清空
            </el-button>
            <el-button @click="add">添加</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-row style="padding-top: 20px;">
          <el-col :span="24">
            <el-table :data="state.tableData" border style="width: 100%;">
              <el-table-column
                prop="id"
                label="序号"
                align="center"
                width="70"
              />
              <el-table-column
                prop="adminAccount"
                label="成员账号"
                align="center"
              />
              <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="110"
              />
              <el-table-column prop="email" label="邮箱地址" align="center" />
              <el-table-column
                prop="departmentName"
                label="所属部门"
                align="center"
              />
              <el-table-column
                prop="updateTime"
                label="添加时间"
                align="center"
                :formatter="dateFormat"
              />
              <el-table-column
                prop="updateTime"
                label="最后登录"
                align="center"
                :formatter="dateFormat"
              />
              <el-table-column prop="" label="操作" align="center">
                <template #default="scope">
                  <el-button
                    type="text"
                    @click="edit(scope.$index, scope.row.id)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="text"
                    @click="Delete(scope.$index, scope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 分页 -->
        <div class="demo-pagination-block">
          <el-pagination
            :current-page="state.currentPage4"
            :page-size="state.pageSize"
            :page-sizes="[3, 6, 9]"
            :small="state.small"
            :disabled="state.disabled"
            :background="state.background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="state.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { obscure, department, deleteMember } from '../http/api'

const handleSizeChange = (val: number) => {
  state.pageSize = val
  getList()
}
const handleCurrentChange = (val: number) => {
  state.currentPage4 = val
  getList(state.currentPage4, formInline.region, formInline.user)
}
const formInline: any = reactive({
  user: '',
  region: '',
})
var state = reactive({
  tableData: [],
  total: 1,
  page: 1,
  pageSize: 3,
  currentPage4: 1,
  small: false,
  disabled: false,
  background: false,
})
var state1: any = reactive({ department: [] })

const router: any = useRouter()

onMounted(() => {
  getList()
  department().then((res) => {
    console.log(res.data)
    state1.department = res.data
  })
})
//添加
function add() {
  router.push({ path: 'addMember', query: { msg: '新增' } })
}
//编辑
function edit(index, id) {
  router.push({ path: 'editMember', query: { id: id } })
}
//删除
function Delete(index, id) {
  ElMessageBox.confirm('确定要删除此项吗？？', '提示！！！！', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      deleteMember(id).then((res) => {
        getList()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}
//获取列表
const getList: any = (a, b, c) => {
  obscure({ page: a, limit: state.pageSize, departmentId: b, name: c }).then(
    (res: any) => {
      console.log(res)
      state.tableData = res.data
      state.total = res.count
      state.page = Math.ceil(res.data.count / state.pageSize)
    },
  )
}
//搜索
const search: any = (bool) => {
  state.currentPage4 = 1
  console.log(formInline)
  getList(state.currentPage4, formInline.region, formInline.user)
}
//转换时间
const dateFormat = (row, column) => {
  var date = new Date(row.updateTime)
  var year = date.getFullYear()
  var month =
    date.getMonth() < 9
      ? '0' + (date.getMonth() + 1)
      : '' + (date.getMonth() + 1)
  var day = date.getDate() < 10 ? '0' + date.getDate() : '' + date.getDate()
  var hour = date.getHours() < 10 ? '0' + date.getHours() : '' + date.getHours()
  var minutes =
    date.getMinutes() < 10 ? '0' + date.getMinutes() : '' + date.getMinutes()
  var seconds =
    date.getSeconds() < 10 ? '0' + date.getSeconds() : '' + date.getSeconds()
  return (
    year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
  )
}
//清空
const empty: Function = () => {
  formInline.region = ''
  formInline.user = ''
}
</script>

<style scoped>
.main {
  background-color: white;
  border-radius: 10px;
}
.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
  height: 50px;
}
</style>
